<template>
  <div class="flockSet">
    <mt-header>
      <mt-button icon="back" slot="back"></mt-button>
    </mt-header>
    <div class="flockSetContent">
      <p class="flockName">群聊名称:&nbsp;&nbsp;{{ $store.state.flockName }}</p>
      <div class="userList">
        <div class="user" v-for="(item,index) in user" :key="index">
          <img
            :src="item.image"
            alt=""
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MtHeader from "@/components/MtHeader.vue";
export default {
  data() {
    return {
      user: []
    };
  },

  //计算属性，会监听依赖属性值随之变化
  computed: {},

  //状态监听
  watch: {},

  //过滤器
  filters: {},

  //方法
  methods: {},

  //组件
  components: { MtHeader },

  //生命周期 - 实例完成
  created() {
    this.user = this.$store.state.users;
  },

  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.user.sort((a, b) => a['name'].localeCompare(b['name']));
    //console.log(this.user);
  },
};
</script>

<style lang='scss' scoped>
.flockSet {
  height: 100%;
  .flockSetContent{
    padding: 10px;
    box-sizing: border-box;
    p{
      margin-top: 0;
    }
  }
}
.userList {
  .user {
    display: inline-block;
    width: 20%;
    text-align: center;
    img {
      width: 50px;
      height: 50px;
      border-radius: 50%;
    }
  }
}
</style>
